<template>
    <section class="out-manage">
        <el-row :span="24">
            <el-col :span="11" class="out-manage-left out-manage-com">
                <div class="title">
                    <h3 style="margin-left: 10px;color: #59595A;"><i class="fa fa-shopping-cart" style="margin-right: 15px;"></i>订单详情</h3>
                </div>
                <table cellpadding="0" cellspacing="0">
                    <tbody>
                        <tr>
                            <td>
                                <el-button type="primary" size="small" title="商店">
                                    <i class='fa fa-shopping-cart fa-fw'></i>
                                </el-button>
                            </td>
                            <td>母婴乐</td>
                        </tr>
                        <tr>
                            <td>
                                <el-button type="primary" size="small" title="生成日期">
                                    <i class='fa fa-calendar fa-fw'></i>
                                </el-button>
                            </td>
                            <td>2017-11-04 10:28:24</td>
                        </tr>
                        <tr>
                            <td>
                                <el-button type="primary" size="small" title="支付方式">
                                    <i class='fa fa-credit-card fa-fw'></i>
                                </el-button>
                            </td>
                            <td>微信公众号支付</td>
                        </tr>
                    </tbody>
                </table>
            </el-col>
            <el-col :span="11" :offset="2" class="out-manage-right out-manage-com">
                <div class="title" style="width: 100%;height: 40px;line-height: 40px;padding-left: 25px;">
                    <h3 style="margin-left: 10px;color: #59595A;"><i class="fa fa-user" style="margin-right: 15px;"></i>客户明细</h3>
                </div>
                <table cellpadding="0" cellspacing="0">
                    <tbody>
                    <tr>
                        <td>
                            <el-button type="primary" size="small" title="客户名称">
                                <i class='fa fa-user fa-fw'></i>
                            </el-button>
                        </td>
                        <td>小婷</td>
                    </tr>
                    <tr>
                        <td>
                            <el-button type="primary" size="small" title="客户组">
                                <i class='fa fa-group fa-fw'></i>
                            </el-button>
                        </td>
                        <td>普通用户</td>
                    </tr>
                    <tr>
                        <td>
                            <el-button type="primary" size="small" title="E-Mail">
                                <i class='fa fa-envelope-o fa-fw'></i>
                            </el-button>
                        </td>
                        <td>email</td>
                    </tr>
                    <tr>
                        <td>
                            <el-button type="primary" size="small" title="联系电话">
                                <i class='fa fa-phone fa-fw'></i>
                            </el-button>
                        </td>
                        <td>13592458227</td>
                    </tr>
                    </tbody>
                </table>
            </el-col>
        </el-row>
        <el-row :span="24" class="goods out-manage-com">
            <div class="title">
                <h3 style="margin-left: 10px;color: #59595A;"><i class="fa fa-cog" style="margin-right: 15px;"></i>商品详情</h3>
            </div>
            <table cellpadding="0" cellspacing="0"  style="">
                <tbody>
                <tr>
                    <td style="width: 50%;">EVA童趣小鸭卡通椅（小黄鸭/小绿鸭）颜色随机发货</td>
                    <td style="text-align: right;">选项:   EVA童趣小鸭卡通椅（小黄鸭/小绿鸭）颜色随机发货
                        SKU:  /  价格：¥59.00  /  数量：1  /  小计：¥59.00</td>
                </tr>
                <tr>
                    <td style="width: 50%;">
                        商品总额
                    </td>
                    <td style="text-align: right;">¥59.00</td>
                </tr>
                <tr>
                    <td style="width: 50%;">
                        邮费
                    </td>
                    <td style="text-align: right;">8.00</td>
                </tr>
                <tr>
                    <td style="width: 50%;">
                        小黄鸭卡通椅
                    </td>
                    <td style="text-align: right;">-¥59.00</td>
                </tr>
                <tr>
                    <td style="width: 50%;">
                        实付金额
                    </td>
                    <td style="text-align: right;">¥59.00</td>
                </tr>
                <tr>
                    <td style="width: 50%;">
                        物流地址
                    </td>
                    <td style="text-align: right;">辽宁 鞍山 岫岩 岫岩满族自治县 【收货人：刘晓婷/ 电话：13842214358】</td>
                </tr>
                </tbody>
            </table>
        </el-row>
        <el-row class="out-manage-com">
            <div class="title" style="">
                <h3 style="margin-left: 10px;color: #59595A;"><i class="fa fa-comment-o" style="margin-right: 15px;"></i>添加订单记录</h3>
            </div>
            <el-tabs type="border-card" style="margin: 15px;">
                <el-tab-pane label="历史">
                    <!--列表-->
                    <el-table
                            :data="tableDatas"
                            style="width: 100%">
                        <el-table-column
                                prop="date"
                                label="生成日期"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="订单附言"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="status"
                                label="状态">
                        </el-table-column>
                        <el-table-column
                                prop="inform"
                                label="通知客户">
                        </el-table-column>
                    </el-table>
                    <!--分页-->
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :page-size="10"
                            layout="prev, pager, next, jumper"
                            style="text-align: right;margin-top: 20px;"
                            :total="100">
                    </el-pagination>
                    <div style="margin-top: 15px;">
                        <h3>添加历史订单</h3>
                        <hr>
                        <el-form ref="form" style="margin-top: 50px;">
                            <el-form-item label="状态">
                                <el-select  placeholder="请选择活动区域">
                                    <el-option label="出库" value="shanghai"></el-option>
                                    <el-option label="订单" value="beijing"></el-option>
                                    <el-option label="订单" value="beijing"></el-option>
                                    <el-option label="订单" value="beijing"></el-option>
                                    <el-option label="订单" value="beijing"></el-option>
                                    <el-option label="订单" value="beijing"></el-option>
                                    <el-option label="订单" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item size="large" style="text-align: right;">
                                <el-button type="primary"><i class="fa fa-plus-circle" style="margin-right: 10px"></i>添加订单记录</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="附加">
                    <div style="border: 1px solid #BEBEBE;">
                        <div class="title">浏览器</div>
                        <table>
                            <tbody>
                                <tr>
                                    <td style="border-right: 1px solid #BEBEBE;">IP 地址</td>
                                    <td>123.151.77.71</td>
                                </tr>
                                <tr>
                                    <td style="border-right: 1px solid #BEBEBE;">转发 IP</td>
                                    <td>223.104.176.90</td>
                                </tr>
                                <tr>
                                    <td style="border-right: 1px solid #BEBEBE;">操作系统</td>
                                    <td>Mozilla/5.0 (Linux; Android 7.1.1; OPPO R11t Build/NMF26X; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/53.0.2785.49 Mobile MQQBrowser/6.2 TBS/043610 Safari/537.36 MicroMessenger/6.5.16.1120 NetType/WIFI Language/zh_CN1</td>
                                </tr>
                                <tr>
                                    <td style="border-right: 1px solid #BEBEBE;">系统语言</td>
                                    <td>zh-CN,en-US;q=0.8</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-row>
    </section>
</template>

<script>

 export default {
     data(){
         return {
             filters: {
                 pageSize: 10,
                 page: 1,
             },
             tableDatas : [
                 {date: "2017/10/30",name: "附言",status: "已付款",inform: "否"},
                 {date: "2017/10/30",name: "附言",status: "已付款",inform: "否"},
                 {date: "2017/10/30",name: "附言",status: "已付款",inform: "否"},
                 {date: "2017/10/30",name: "附言",status: "已付款",inform: "否"}
             ]
         }
     },
     methods: {
         //条数改变
         handleSizeChange(size) {
             this.filters.pageSize = size;
             this.handleList();
         },
         //分页改变
         handleCurrentChange(val) {
//            console.log(val); //val就是页码数
             this.filters.page = val;
             this.handleList();
         },

     }

 }
</script>

<style lang="scss" scoped>

    .out-manage {

    /*公共的样式*/
        h3 {
            margin: 0;
            padding: 0;
        }
        .out-manage-com {
            margin-top: 30px;
            border: 1px solid #BEBEBE;
            border-top: 2px solid #BEBEBE;
        }
        .title {
            width: 100%;
            height: 40px;
            line-height: 40px;
            padding-left: 25px;
        }
        tr:last-child td {
            border: 0 none;
        }
        .el-form-item__label {
            /*text-align: right;*/
            /*width: 500px!important;*/
        }
        .el-select {
            width: 800px!important;
        }
        table {
            border-top: 1px solid #BEBEBE;
            width: 100%;
            padding: 0;
            color: #666666;
            tbody {
                tr {
                    height: 40px!important;
                    border-bottom: 1px solid #DCDCDC!important;
                    td {
                        border-bottom: 1px solid #BEBEBE;
                        padding-left: 15px;
                    }
                 }
             }

         }
         .out-manage-left {
            tr{
                td:nth-child(1) {
                    width: 40px;
                }
            }
         }
        .out-manage-right {
            tr{
                td:nth-child(1) {
                    width: 40px;
                }
            }
        }
    }

</style>